<template>
  <div class="zhengwu">
    <van-swipe :autoplay="5000">
      <van-swipe-item v-for="(image, index) in images" :key="index">
        <van-image width="100%" height="220" :src="image" fit="fill"/>
      </van-swipe-item>
    </van-swipe>

    <div style="margin: 1rem;">
      <van-image width="100%" height="150" src="https://img.yzcdn.cn/vant/cat.jpeg" fit="fill"/>
    </div>

    <div class="special-topic" style="margin: 1rem;">
      <div class="row space-between">
        <div class="topic-label">专题</div>
        <div class="row align-center" style="color: #969495;">
          <span>更多</span>
          <van-icon name="arrow"/>
        </div>
      </div>

      <div class="horizontal-scroll top-gap">
        <div class="col" v-for=" (item,n) in images" :key="n" style="margin-right: 10px; width:50%;">
          <van-image
            fit="fill"
            height="100"
            :src="item"
          />

          <span class="van-multi-ellipsis--l2 top-gap">
            {{ titles[n] }}
          </span>

        </div>
      </div>

    </div>

    <van-divider/>

    <div class="new-recommend" style="margin: 1rem;">
      <div class="row space-between">
        <div class="header">最新推荐</div>

        <div class="row align-center" style="color: #969495;">
          <span>更多</span>
          <van-icon name="arrow"/>
        </div>
      </div>

      <div class="recommend-item col top-gap">
        <div class="title">2020年活动正式开启，有啥意见建议意见建议意见建议快来提吧</div>
        <img src="https://img.yzcdn.cn/vant/cat.jpeg" fit="fill" class="img-single"/>
        <van-divider/>
      </div>

      <div class="recommend-item col">
        <div class="title">我市组织举办“应急第一响应人”培训班</div>

        <div class="row top-gap">
          <div class="recommend-item-img"></div>
          <div class="recommend-item-img"></div>
          <div class="recommend-item-img"></div>
        </div>

        <div class="row space-between top-gap" style="color: #969495;font-size: small">
          <span>本地新闻</span>
          <span>11-19 18:40</span>
        </div>
        <van-divider/>
      </div>

      <div class="recommend-item col">
        <div class="row">
          <div class="col space-between" style="flex:2;">
            <div class="title">乘风破浪 环球软件成为软件产业龙头</div>
            <div class="row space-between top-gap" style="color: #969495;font-size: small">
              <span>头条</span>
              <span>11-11 20:21</span>
            </div>
          </div>

          <div class="recommend-item-img" style="margin-right:0;"></div>
        </div>
        <van-divider/>
      </div>

    </div>

  </div>
</template>

<script>
export default {
  name: "ZhengWu",
  data() {
    return {
      images: [
        'https://img.yzcdn.cn/vant/apple-1.jpg',
        'https://img.yzcdn.cn/vant/apple-2.jpg',
        'https://img.yzcdn.cn/vant/cat.jpeg',
      ],

      titles: ['我是人口普查进入登记工作阶段', '我是人口普查进入登记工作阶段', '我是人口普查进入登记工作阶段'],
    }
  },
}
</script>

<style scoped lang="scss">

.zhengwu {
  $gap: 0.7rem;

  .top-gap {
    margin-top: $gap;
  }

  background-color: white;
  margin-bottom: 5rem;

  & .col {
    display: flex;
    flex-direction: column;
  }

  & .space-between {
    justify-content: space-between;
  }

  & .row {
    display: flex;
    flex-direction: row;
  }

  & .align-center {
    align-items: center;
  }

  .special-topic {
    .topic-label {
      color: #ea5638;
      background-color: #fce5dd;
      padding: 0.2rem;
      font-size: 16px;
    }

    .horizontal-scroll {
      overflow-x: scroll;
      white-space: nowrap;
      overflow-y: hidden;
      display: flex;
      justify-content: space-between;
      -webkit-overflow-scrolling: touch;

      &::-webkit-scrollbar {
        display: none;
      }
    }
  }

  .new-recommend {
    & .header {
      font-size: 16px;
    }

    .recommend-item {
      & .title {
        font-size: 15px;
      }

      & .img-item {
        margin-top: $gap;
        border-radius: .3rem;
        width: 100%;
        height: 150px;
      }

      & .img-single {
        @extend .img-item;
        height: 220px;
      }

      .recommend-item-img {
        background-image: url("https://img.yzcdn.cn/vant/cat.jpeg");
        background-repeat: no-repeat;
        background-size: 100% 100%;
        height: 6rem;
        border-radius: .2rem;
        flex: 1;

        &:nth-of-type(2) {
          margin: 0 $gap;
        }
      }
    }
  }
}
</style>
